<!--
* @Name: user-Index
* @Description: user 的 index 文件
* @Author: 三咲问道
* @Date: 2025-07-6
-->

<template>
    <div class="contain">
        <div class="search-contain">
            <div class="item">
                <div class="name">用户名</div>
                <div class="info">
                    <el-input v-model="searchParams.name" style="width: 200px" placeholder="请输入" />
                </div>
            </div>
            <div class="item">
                <div class="name">昵称</div>
                <div class="info">
                    <el-input v-model="searchParams.nickname" style="width: 200px" placeholder="请输入" />
                </div>
            </div>
            <div class="item">
                <div class="name">邮箱</div>
                <div class="info">
                    <el-input v-model="searchParams.email" style="width: 200px" placeholder="请输入" />
                </div>
            </div>
            <div class="item">
                <div class="name">电话</div>
                <div class="info">
                    <el-input v-model="searchParams.phone" style="width: 200px" placeholder="请输入" />
                </div>
            </div>
            <div class="item">
                <el-button type="primary" @click="searchHandle">搜索</el-button>
                <el-button type="primary" plain @click="resetHandle">重置</el-button>
            </div>
        </div>

        <TableComponent v-if="!isEmptyObject(usersData)" :columnList="columnList" :data="usersData"
            @size-change="sizeChange" @current-change="currentChange">
            <template #operate="{ scope }">
                <div class="operate-content">
                    <div class="col-1" @click="operateHandle(1, scope)">新增</div>
                    <div class="col-2" @click="operateHandle(2, scope)">删除</div>
                    <div class="col-1" @click="operateHandle(3, scope)">修改</div>
                </div>
            </template>
        </TableComponent>

        <!-- 新增-修改 -->
        <template v-if="showDialogVisible">

            <el-dialog v-model="showDialogVisible" :title="cartUsersTitle" width="500">
                <el-form :model="cartUsersForm">

                    <el-form-item label="用户名" :label-width="formLabelWidth">
                        <el-input v-model="cartUsersForm.name" autocomplete="off" />
                    </el-form-item>

                    <el-form-item label="昵称" :label-width="formLabelWidth">
                        <el-input v-model="cartUsersForm.nickname" autocomplete="off" />
                    </el-form-item>

                    <el-form-item label="邮箱" :label-width="formLabelWidth">
                        <el-input v-model="cartUsersForm.email" autocomplete="off" />
                    </el-form-item>

                    <el-form-item label="电话" :label-width="formLabelWidth">
                        <el-input v-model="cartUsersForm.phone" autocomplete="off" />
                    </el-form-item>

                </el-form>

                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="resetDialogVisible">取消</el-button>
                        <el-button type="primary" @click="saveHandle">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>

        </template>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import type { cartUsersItem } from '@/types/cartUsers'
import { isEmptyObject } from '@/common/utils/commonUtils'

import TableComponent from '@/common/components/TableComponent.vue'

import { storeToRefs } from 'pinia';
import { cartUsersStore } from '@/stores/cartUsersStore'

const { usersData } = storeToRefs(cartUsersStore())


let searchParams = ref(
    {
        name: '',
        nickname: '',
        email: '',
        phone: ''
    }
)

const columnList = [
    {
        columnKey: 'userId',
        columnName: '用户ID'
    },
    {
        columnKey: 'name',
        columnName: '用户名'
    },
    {
        columnKey: 'nickname',
        columnName: '昵称'
    },
    {
        columnKey: 'email',
        columnName: '邮箱'
    },
    {
        columnKey: 'phone',
        columnName: '电话'
    },
    {
        columnKey: 'operate',
        slotName: 'operate',
        width: '200',
        columnName: '操作'
    },
]

const searchHandle = (page = { pageCurrent: 1, pageSize: 10 }) => {
    cartUsersStore().getCartUsers({ ...searchParams.value, ...page })
}

const resetHandle = () => {
    searchParams.value = {
        name: '',
        nickname: '',
        email: '',
        phone: ''
    }

}

const sizeChange = (e: number) => {
    const page = {
        pageCurrent: 1,
        pageSize: e ?? 10
    }

    searchHandle(page)
}

const currentChange = (e: number) => {
    const page = {
        pageCurrent: e,
        pageSize: usersData?.value?.pageSize ?? 10
    }

    searchHandle(page)
}

searchHandle()


let showDialogVisible = ref(false)
let cartUsersTitle = ref('新增')
let formLabelWidth = 100

let cartUsersForm = ref(
    {
        userId: '',
        name: '',
        nickname: '',
        email: '',
        phone: ''
    }
)

const operateHandle = (type: number, scope: any) => {
    const { row } = scope
    console.log('operateHandle: ', row);

    /**  新增 */
    if (type === 1) {
        cartUsersTitle.value = '新增'
        showDialogVisible.value = true
    }

    /**  删除 */
    if (type === 2) {
        deleteRowHandle(row)
    }

    /**  编辑 */
    if (type === 3) {
        cartUsersTitle.value = '修改'
        showDialogVisible.value = true

        cartUsersForm.value = { ...row }

    }

}

/**  取消 */
const resetDialogVisible = () => {
    cartUsersTitle.value = '新增'
    showDialogVisible.value = false
    cartUsersForm.value = {
        userId: '',
        name: '',
        nickname: '',
        email: '',
        phone: ''
    }
}

/**  保存 */
const saveHandle = async () => {

    let result = -1

    if (cartUsersForm.value.userId) {
        // 修改
        const { code } = await cartUsersStore().updateCartUsers(cartUsersForm.value)
        result = code
    } else {
        const { code } = await cartUsersStore().createCartUsers(cartUsersForm.value)
        result = code
    }


    if (result === 0) {
        searchHandle()
        resetDialogVisible()
    }
}

/**  删除 */
const deleteRowHandle = (row: cartUsersItem) => {
    ElMessageBox.confirm(
        '您是否要删除该数据?',
        // '删除',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确认',
            cancelButtonText: '取消',
        }
    )
        .then(async () => {
            const { userId } = row
            const { code } = await cartUsersStore().deleteCartUsers({ userId })

            !code && searchHandle()
        })
        .catch((action: Action) => {
            console.log(111, action);
        })
}

</script>

<style lang="less" scoped>
.contain {
    .search-contain {
        display: flex;
        margin-bottom: 12px;

        .item {
            display: flex;
            margin-right: 20px;

            .name {
                line-height: 32px;
                margin-right: 4px;
                text-align: right;
            }
        }
    }

    .operate-content {
        display: flex;
        justify-content: space-around;

        &>div {
            cursor: pointer;
        }

        .col-1 {
            color: #409eff;
        }

        .col-2 {
            color: #f56c6c;
        }
    }
}
</style>